import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
import { BasicDrawer, BasicForm } from "@/components/Antd";
import Detail from "./Detail";
const handleTypeMap: any = {
  add: "新增用户",
  update: "编辑用户",
  detail: "用户详情",
};
const formList = [
  {
    type: "input",
    label: "用户名",
    name: "username",
    placeholder: "请输入用户名",
    rules: [{ required: true, message: "请输入用户名" }],
  },
  {
    type: "inputPassword",
    label: "密码",
    name: "password",
    placeholder: "请输入密码",
    rules: [{ required: true, message: "请输入密码" }],
  },
  {
    type: "select",
    label: "状态",
    name: "status",
    placeholder: "请选择状态",
    options: [
      {
        label: "禁用",
        value: 0,
      },
      {
        label: "启用",
        value: 1,
      },
    ],
    disabled: true,
  },
  {
    type: "input",
    label: "手机号",
    name: "phone",
    placeholder: "请输入手机号",
  },
];
const Drawer = ({ fetchList, refreshTable }: any, ref: any) => {
  const [formInline] = useState({
    status: 1, // 0 禁用 1 启用
    username: "admin",
    password: 123456,
    phone: undefined,
  });
  const BasicFormRefs: any = useRef(null);
  const [open, setOpen] = useState(false);
  let [handleType, setHandleType] = useState("");
  const openDrawer = (type: string, record: any) => {
    setOpen(true);
    setHandleType(type);
    console.log("openDrawer", type, record);
  };
  console.log("Drawer组件", handleType);
  const onClose = () => setOpen(false);
  useImperativeHandle(ref, () => ({
    openDrawer,
  }));

  useEffect(() => {
    if (open === true) {
      if (handleType != "detail") {
        BasicFormRefs.current.resetFields();
        BasicFormRefs.current.setFieldsValue(formInline);
      }

      switch (handleType) {
        case "add":
          break;
        case "update":
          break;
        case "detail":
          break;
      }
    }
  }, [open]);

  const onSubmit = async () => {
    try {
      if (handleType != "detail") {
        const values = await BasicFormRefs.current.validateFields();
        console.log("values", values);
        const params = BasicFormRefs.current.getFieldsValue();
        console.log("onSubmit", params);
      }

      switch (handleType) {
        case "add":
          setTimeout(() => {
            refreshTable();
            onClose();
          }, 300);
          break;
        case "update":
          setTimeout(() => {
            fetchList();
            onClose();
          }, 300);
          break;
        case "detail":
          onClose();
          break;
      }
    } catch (error) {
      console.log("error", error);
    } finally {
    }
  };

  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <BasicDrawer
        title={handleTypeMap[handleType]}
        onClose={onClose}
        open={open}
        width={800}
        onSubmit={onSubmit}
        okText={handleType === "detail" ? "确定" : "保存"}
        disabled={handleType != "detail" && disabled}
      >
        {handleType != "detail" ? (
          <BasicForm
            formList={formList}
            isShowSubmit={false}
            ref={BasicFormRefs}
            requiredFields={["username", "password"]}
            setDisabled={setDisabled}
            formItemLayout={{ labelCol: { span: 6 }, wrapperCol: { span: 18 } }}
            columnCount={2}
          />
        ) : (
          <Detail formInline={formInline} />
        )}
      </BasicDrawer>
    </>
  );
};

export default forwardRef(Drawer);
